<template>
	<div class="pr10">
		<p class="title mt20 pb10">{{ $t('会员账号信息') }}</p>
		<el-table
			v-loading="memberLoading"
			element-loading-spinner="el-icon-loading"
			border
			size="mini"
			:data="memberDatas"
			style="width: 100%"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				align="center"
				:label="`${$t('common.member_number')}`"
				prop="userName"
			>
				<template slot-scope="scope">
					{{ scope.row.userName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="`${$t('funds.fund_audit.belong_proxy')}`"
				prop="parentProxyName"
			>
				<template slot-scope="scope">
					{{ scope.row.parentProxyName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="`${$t('common.belong_merchant')}`"
				prop="merchantName"
			>
				<template slot-scope="scope">
					{{ scope.row.merchantName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="accountStatus"
				align="center"
				:label="$t('common.account_status')"
				:min-width="getWidth(100)"
			>
				<template slot-scope="scope">
					<span
						v-if="!!scope.row.paymentLockStatus"
						class="deleteRgba"
					>
						{{ $t('common.account_lock_status') }}
						<br />
					</span>
					<span
						v-if="!!scope.row.loginLockStatus"
						class="disableRgba"
					>
						{{ $t('common.login_lock_status') }}
						<br />
					</span>
					<span v-if="!!scope.row.gameLockStatus" class="lockingRgba">
						{{ $t('common.game_lock_status') }}
					</span>
					<span
						v-if="
							scope.row.loginLockStatus === 0 &&
								scope.row.gameLockStatus === 0 &&
								scope.row.paymentLockStatus === 0
						"
						class="normalRgba"
					>
						{{ $t('common.account_status_normal') }}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="`${$t('common.register_time')}`"
				prop="createdAt"
			>
				<template slot-scope="scope">
					{{ scope.row.createdAt || '-' }}
				</template>
			</el-table-column>
		</el-table>
		<!-- 应收返水统计 -->
		<div class="mt20">
			<MemberBounsSummary
				:detailData="memberBounsDetail"
				:key="selecteSumaryKey"
			></MemberBounsSummary>
		</div>

		<!-- 个人返水信息 -->
		<div class="mt20">
			<MemberBounsDetail
				:detailData="memberBounsDetail"
				:key="selecteDetailKey"
			></MemberBounsDetail>
		</div>
	</div>
</template>
<script>
import list from '@/mixins/list'
import MemberBounsDetail from '@/components/Funds/MemberBounsDetail'
import MemberBounsSummary from '@/components/Funds/MemberBounsSummary'

export default {
	components: { MemberBounsDetail, MemberBounsSummary },
	mixins: [list],
	props: {
		selectedData: {
			type: Object,
			default: {}
		},
		detailData: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			memberLoading: false,
			memberData: {},
			memberBounsDetail: {
				memberId: 0,
				reportDate: undefined
			},
			selecteSumaryKey: 0,
			selecteDetailKey: 0
		}
	},
	computed: {
		memberDatas() {
			if (this.memberData.userName) {
				return [this.memberData]
			} else {
				return []
			}
		}
	},
	watch: {
		selectedData: {
			handler(next) {
				if (next.type === 2 && next.userName) {
					this.memberBounsDetail = {
						memberId: next.id,
						reportDate: this.detailData.reportDate
					}
					this.selecteSumaryKey = Math.random()
					this.selecteDetailKey = Math.random()
					this.getMemberByUserName()
				}
			},
			immediate: true
		}
	},
	created() {
		this.memberBounsDetail.reportDate = this.detailData.reportDate
	},
	methods: {
		// 获取会员信息
		getMemberByUserName() {
			this.memberLoading = true
			this.$api
				.getOutlineInfo({
					userName: this.selectedData.userName,
					merchantId: this.detailData.merchantId
				})
				.then((res) => {
					this.memberData = res?.data || {}
					this.memberLoading = false
				})
				.catch(() => {
					this.memberData = {}
					this.memberLoading = false
				})
		}
	}
}
</script>
<style lang="scss" scoped>
.title {
	font-weight: 600;
}
.block {
	margin-top: 20px;
	.name {
		font-weight: 600;
		color: #303133;
	}
	.block-content {
		position: relative;
		width: 100%;
		margin-top: 15px;
	}
}
</style>
